import React,{useEffect,useState} from 'react'
import { Outlet,NavLink,useLocation,useNavigate } from 'react-router-dom'
import './Home_less/Home.less'
import { Button,Menu } from 'antd';
import { homeRouter } from '../router';
import loginLogo from '../assets/YiQixiuImage/364ad775250a4424a5b57af1a45c7d6b.webp'
import HeaderOne from '../components/header/HeaderOne';
import HeaderTwo from '../components/header/HeaderTow'
import HeaderFour from '../components/header/HeaderFour';
import { DownOutlined } from '@ant-design/icons';
import { Dropdown, message, Space } from 'antd';
import type { MenuProps } from 'antd';
import HeaderThree from '../assets/tieTu/Header_Three.png'
import HeaderFive from '../assets/tieTu/Header_Five.png'
import HeaderSix from '../assets/tieTu/Header_Six.png'
function Home() {
  const location = useLocation()
  const [selectedKeys, setSelectedKeys] = useState([]);
  const [show,setShow] = useState(false)
  const navigate = useNavigate()
  const render = (arr:any) =>{
      // console.log(arr)
      // const middleIndex = Math.max(0, Math.floor((arr.length - 9) / 2));
      return [
        {
          key: 'g1',
          type: 'group',
          children: arr.map((item:any)=>({
            key:item.id,
            label: item.type == 'group' ? <div style={{color:'#666'}}>{item.title}</div> : <a href={item.path} target="_blank">{item.title}</a>,
            type:item.key ? 'group' : '',
            icon: <img src={item.img} alt={item.title} style={{ width: '20px', height: '20px' }} />
          })),
        },
        // {
        //   key: 'g2',
        //   label: '创意设计',
        //   type: 'group',
        //   children: arr.slice(middleIndex, middleIndex + 9).map((item: any) => ({
        //     key: item.id,
        //     label: <NavLink to={item.path}>{item.title}</NavLink>,
        //     icon: <img src={item.img} alt={item.title} style={{ width: '20px', height: '20px' }} />
        //   })),
        // },
        // {
        //   key: 'g3',
        //   label: '其他',
        //   type: 'group',
        //   children: arr.slice(-4).map((item:any)=>({
        //     key:item.id,
        //     label:<NavLink to={item.path}>{item.title}</NavLink>,
        //     icon: <img src={item.img} alt={item.title} style={{ width: '20px', height: '20px' }} />
        //   })),
        // },
      ]
  };
  const onClick: MenuProps['onClick'] = ({ key }) => {
    message.info(`Click on item ${key}`);
  };
  const items: MenuProps['items'] = [
    {
      label: '全部',
      key: '1',
    },
    {
      label: 'H5',
      key: '2',
    },
    {
      label: '海报',
      key: '3',
    },
    {
      label: '长页',
      key: '4',
    },
    {
      label: '表单',
      key: '5',
    },
    {
      label: '互动',
      key: '6',
    },
    {
      label: '电子画册',
      key: '7',
    },
    {
      label: '视频',
      key: '8',
    },
    {
      label: '解决方案',
      key: '9',
    },
  ];
  useEffect(() => {
    console.log('pathname:', location.pathname);
    const currentPath = homeRouter.find((item)=> item.path === location.pathname)
    if(currentPath && currentPath.id) {
      setSelectedKeys(currentPath.id)
    }
  }, [location]);
  const [scrollPosition, setScrollPosition] = useState(0);
  const handleScroll = () => {
    // 处理滚动事件的逻辑
    const position = window.scrollY;
    setScrollPosition(position);
    
  };
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);

    // 在组件销毁时清除事件监听器
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  useEffect(()=>{
    if(scrollPosition > 133){
        setShow(true)
    }
    else
    {
      setShow(false)
      if(location.pathname == '/home/video' || location.pathname == '/home/template'){
        setShow(true)
      }
    }
  },[scrollPosition])

  useEffect(()=>{
    if(location.pathname == '/home/ai'){
      navigate('/new_ai')
    }
    if(location.pathname == '/home/placard'){
      navigate('/new_placard')
    }
  },[])
  return (
    <div className='box'>
      <div className='box_header'>
        <div className="box_header_content">
          {/* logo图 */}
          <div className="logo"></div>
          {/* 头部中间部分 */}
          <div className="box_header_center">
            <ul>
              <li className='ls1'>
                免费模版
                <div className='l1 ll'>
                  <HeaderOne></HeaderOne>
                </div>  
              </li>
              <li>
                开通会员
                <div className='l2 ll'>
                  <HeaderTwo></HeaderTwo>
                </div>
              </li>

              <li>
                产品服务
                <div className='l3 ll'>
                  <img src={HeaderThree} alt="" style={{width:'100%',height:'100%'}}/>
                </div>
              </li>

              <li>
                解决方案
                <div className='l4 ll'>
                  <HeaderFour></HeaderFour>
                </div>  
              </li>

              <li>
                内容中台
                <div className='l5 ll'>
                  <img src={HeaderFive} alt="" style={{width:'100%',height:'100%'}}/>
                </div>
              </li>

              <li>
                资源与合作
                <div className='l6 ll'>
                  <div>
                    <img src={HeaderSix} alt="" style={{width:'100%',height:'100%'}}/>
                  </div>
                </div>
              </li>
            </ul>
            <span className='hot'>Hot</span>
            <span className='copyright'>版权0风险</span>
            
            
            
            
          </div>
          {/* 头部中间搜索框部分 */}
          {
            show && (
              <div className="box_header_input">
              <div className='header_center'>
                <div className="header_search">
                  <div className='header_search_border'>
                    <Dropdown menu={{ items, onClick }} className='drop'>
                      <a onClick={(e) => e.preventDefault()}>
                        <Space>
                          全部
                          <DownOutlined />
                        </Space>
                      </a>
                    </Dropdown>
                    <input type="text" className='header_inp' />
                    <span className='icon-zhaoxiangji iconfont'></span>
                  </div>
                  <button className='header_btn'><span className='icon-sousuo iconfont'></span></button>
                </div>
              </div>
            </div>
            )
          }

          {/* 头部右侧登录按钮部分 */}
          <div className="box_header_right">
            <Button type="primary">登录/注册</Button>
            <div className='anime'>
              <img src={loginLogo} alt="" />
            </div>
          </div>
        </div>
      </div>


      {/* 侧边栏部分 */}
      <Menu
        className='menu'
        mode="inline"
        // 初始选中的菜单项 key 数组
        selectedKeys={selectedKeys}
        items={render(homeRouter)}
      />
      <div className='box_content'>
        <div className="center">
          <Outlet></Outlet>
        </div>
      </div>
    </div>
  )
}

export default Home
